<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<title>接口数据转换</title>
	<link rel="stylesheet" href="/static/element-ui.css">

	<script src="/static/vue.js"></script>
	<script src="/static/element-ui.js"></script>
	<script src="/static/axios.min.js"></script>
</head>

<body>
	<div id="app">
		<div style="padding-bottom: 5px;">
			<el-button type="success" @click="editRow({})">添加</el-button>
		</div>
		<el-table size="mini" :data="interfaces" row-key="num" border highlight-current-row>
			<el-table-column label="操作" width="115" align="center">
				<template slot-scope="{row}">
					<el-link type="primary" @click="editRow(row)">修改</el-link>
					<el-link type="danger" @click="removeRow(row)">删除</el-link>
				</template>
			</el-table-column>
			<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
			<el-table-column v-for="(v,i) in columns" :prop="v.field" :label="v.title" :width="v.width"
				header-align="center" show-overflow-tooltip></el-table-column>
		</el-table>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			columns: [
				{ field: "Name", title: "名称" }
			],
			interfaces: [],
		},
		methods: {
			loadData: function () {
				var app = this
				axios.get('/api/interfaces').then(function (response) {
					app.interfaces = response.data
				})
			},
			// 编辑行数据
			editRow(row) {
				if (row.Id) {
					window.location.href = '/edit.html?id=' + row.Id
				} else {
					window.location.href = '/edit.html'
				}
			},
			removeRow(row) {
				var app = this
				axios.delete('/api/interfaces/' + row.Id).then(function (response) {
					app.loadData()
				});
			}
		},
		created: function () {
			this.loadData()
		}
	});
</script>

</html>